import { Tabs } from 'ant-design-vue'
import { defineComponent, ref, watch } from 'vue'
import Login from './login'
import LoginCode from './loginCode'
import PropTypes from '@/utils/PropTypes'
import Register from './register'

export default defineComponent({
  name: 'ComponentName',
  props: {
    type: PropTypes.bool().def(true),
  },
  setup(props) {
    const activeKey = ref(1)
    watch(
      () => props.type,
      () => {
        activeKey.value = 1
      },
    )
    return () => (
      <div>
        {props.type ? (
          <Tabs v-model:activeKey={activeKey.value}>
            <Tabs.TabPane key={1} tab="账号登录">
              <Login key={activeKey.value} />
            </Tabs.TabPane>
            <Tabs.TabPane key={2} tab="手机号登陆">
              <LoginCode key={activeKey.value} />
            </Tabs.TabPane>
          </Tabs>
        ) : (
          <Tabs v-model:activeKey={activeKey.value}>
            <Tabs.TabPane key={1} tab="账号注册">
              <Register />
            </Tabs.TabPane>
          </Tabs>
        )}
      </div>
    )
  },
})
